import React from 'react';
import styles from './Button.module.css';

export interface CircleButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
    size?: 'small' | 'medium' | 'large';
    variant?: 'primary' | 'secondary' | 'danger';
    loading?: boolean;
}

export const CircleButton: React.FC<CircleButtonProps> = ({
    size = 'medium',
    variant = 'primary',
    loading = false,
    className,
    disabled,
    children,
    ...props
}) => {
    const sizeClass = styles[`circle-${size}`] || '';
    const variantClass = styles[`circle-${variant}`] || '';
    const loadingClass = loading ? styles.loading : '';

    return (
        <button
            className={`${styles.circleButton} ${sizeClass} ${variantClass} ${loadingClass} ${className || ''}`}
            disabled={disabled || loading}
            {...props}
        >
            {loading ? <span className={styles.spinner} /> : children}
        </button>
    );
};